<template>
  <view class="searchbox">
    <view class="searchinput">
      <!-- 搜索框 -->
      <uni-search-bar v-model="key" @input="searchInput" @confirm="myConfirm" cancelButton="none" :radius="20">
      </uni-search-bar>
    </view>
    <!-- 搜索建议 -->
    <view class="result" v-if="searchResult.length > 0">
      <view @click="toDetail(item.goods_id)" class="item" v-for="(item, index) in searchResult" :key="index">
        <view class="text">
          {{ item.goods_name }}
        </view>
        <uni-icons type="forward" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history" v-else>
      <view class="title">
        <text>搜索历史</text>
        <uni-icons @click="removeHis" type="trash-filled" size="20"></uni-icons>
      </view>
      <view class="itembox">
        <view @click="toList(item)" class="item" v-for="(item, index) in historyList" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 定义一个定时器
        timer: null,
        // 保存搜索建议列表（联想数据）
        searchResult: [],
        // 搜索框的默认数据
        key: '',
        // 保存搜索历史的数据源
        historyList: []
      };
    },
    methods: {
      // 点击搜索历史扣跳转到商品列表页面
      toList(item) {
        uni.navigateTo({
          url: `/pages/list/list?key=${item}`
        })
      },
      // 清除历史记录
      removeHis() {
        // 清除本地的数据
        uni.removeStorageSync('his')
        // 清除 historyList
        this.historyList = []
        // 提示清除成功
        uni.showToast({
          title: '清除数据成功',
          icon: "success"
        })
      },
      // 点击完成按钮时会触发
      myConfirm(e) {
        // e.value: 输入框中的内容
        // 跳转到商品列表页面
        uni.navigateTo({
          url: `/pages/list/list?key=${e.value}`
        })
        // 将搜索的历史记录保存起来
        this.historyList.unshift(e.value)
        // 将数据进行去重：可以使用 set 对象
        this.historyList = [...new Set(this.historyList)]
        // 将历史记录保存到本地
        uni.setStorageSync('his', this.historyList)
      },
      // 跳转到详情页面
      toDetail(goods_id) {
        uni.navigateTo({
          url: `/pages/goods_detail/main?goods_id=${goods_id}`
        })
      },
      // 在搜索框中搜索内容时会触发
      searchInput(e) {
        // 清除定时器
        clearTimeout(this.timer)
        // 判断关键字是否空
        if (e === '') return
        this.timer = setTimeout(() => {
          console.log('searchInput', e)
          // 调用方法得到搜索建议
          this.getSearchResult(e)
        }, 500)
      },
      // 请求接口得到搜索建议
      async getSearchResult(key) {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', {
          query: key
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message.goods
      }
    },
    onLoad() {
      // 读取本地的数据
      this.historyList = uni.getStorageSync('his') || []
    },
    // 当页面隐藏时会触发的函数
    onHide() {
      // 重置搜索建议
      this.searchResult = []
      // 重置搜索框中的关键字
      this.key = ''
    }
  }
</script>

<style lang="scss">
  .searchbox {
    .searchinput {
      background-color: #c00000;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 999;
    }

    .result {
      .item {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;

        .text {
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .history {
      font-size: 14px;

      .title {
        display: flex;
        justify-content: space-between;
        padding: 0 10rpx;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
      }

      .itembox {
        display: flex;

        .item {
          padding: 5px;
          margin: 0 10px;
        }
      }
    }
  }
</style>
